<template>
	<div class="village-check">
		<component
			:is="formSlot"
			confirmText="提交"
			@onSubmit="onSubmit"
		>
			<h3>隐患检查</h3>
			<div
				class="bolck"
				v-for="(item, index) in checkList"
				:key="index"
			>
				<van-field
					:class="{'field-column': item.type === 2}"
					v-model="item.value"
					:label="`${index + 1}.${item.label}`"
					placeholder="请选择"
					required
					:rules="validator.boolean"
				>
					<template #input>
						<van-radio-group v-model="item.value" direction="horizontal">
							<van-radio
								v-for="item in item.type === 2 ? echoData.boolean2 : echoData.boolean"
								:name="item.value"
								:key="item.value"
							>
								{{ item.label }}
							</van-radio>
						</van-radio-group>
					</template>
				</van-field>
				<van-field
					v-if="['0', '1'].includes(String(item.value))"
					class="field-column"
					:rules="+item.value === 1 ? validator.image : []"
				>
					<template #input>
						<component
							:is="upload"
							v-model="item.image"
						/>
					</template>
				</van-field>
				<van-field
					v-if="+item.value === 1"
					class="field-textarea field-column"
					v-model="item.desc"
					label="隐患描述"
					placeholder="隐患描述"
					type="textarea"
				/>
			</div>

			<van-field
				v-model="formData.txxxysjbf"
				label="8，自查人填写房屋基本信息与实际不符"
				class="field-no-border"
				placeholder="请选择"
				required
				:rules="validator.boolean"
			>
				<template #input>
					<van-radio-group v-model="formData.txxxysjbf" direction="horizontal">
						<van-radio
							v-for="item in echoData.boolean"
							:name="item.value"
							:key="item.value"
						>
							{{ item.label }}
						</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<van-field
				class="field-column field-textarea"
				v-model="formData.bzsm"
				label="备注说明"
				placeholder="请输入"
				type="textarea"
			/>

			<h3>签字信息</h3>
			<component
				:is="eSign"
				v-model="sign"
			/>
		</component>
	</div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import eSign from '@/components/eSign'
import formSlot from '@/components/formSlot'
import upload from '@/components/upload'
import { Dialog, Toast } from 'vant'
import { useRouter, useRoute } from 'vue-router'
import { updateYhjc } from '@/service/village'

const validateNumber = (val) =>
	new Promise((resolve) => {
		if (val && val >= 0) {
			resolve(true)
		} else {
			resolve(false)
		}
	})


const route = useRoute()
const router = useRouter()
const sign = ref(null)
const checkList = ref([
	{
		label: '电动自行车、电动助力车、电动平衡车等需要充电车辆及其电池在室内及安全出口处停放、充电',
		value: '',
		image: [],
		desc: '',
		zgValue: '',
		zgImage: [],
		count: '',
	},
	{
		label: '在公共区域、租住房间内、地下室使用瓶装液化石油气',
		value: '',
		image: [],
		desc: '',
		zgValue: '',
		zgImage: [],
		count: '',
	},
	{
		label: '疏散走道、楼梯间、安全出口处堆放物品影响人员疏散',
		value: '',
		image: [],
		desc: '',
		zgValue: '',
		zgImage: [],
	},
	{
		label: '私拉乱接电线',
		value: '',
		image: [],
		desc: '',
		zgValue: '',
		zgImage: [],
	},
	{
		label: '灭火器未保持完好有效',
		value: '',
		image: [],
		desc: '',
		zgValue: '',
		zgImage: [],
	},
	{
		label: '是否存在窗口防护网、广告牌、铁栅栏',
		value: '',
		image: [],
		desc: '',
		zgValue: '',
		zgImage: [],
	},
	{
		label: '简易喷淋灭火系统未保持完好有效',
		value: '',
		image: [],
		desc: '',
		type: 2,
		zgValue: '',
		zgImage: [],
	},
	{
		label: '烟感报警器未保持完好有效',
		value: '',
		image: [],
		desc: '',
		type: 2
	}
])
const dataEnum = [
	{
		label: '电动自行车、电动助力车、电动平衡车等需要充电车辆及其电池在室内及安全出口处停放、充电',
		value: 'useElectricBicycle',
		image: 'useElectricBicyclePhoto',
		desc: 'useElectricBicycleMsg',
		zgValue: 'useElectricBicycleZgqk',
		zgImage: 'useElectricBicycleZgPhoto',
		count: 'zxqlddcsl',
	},
	{
		label: '在公共区域、租住房间内、地下室使用瓶装液化石油气',
		value: 'useBottledLiquefiedGas',
		image: 'useBottledLiquefiedGasPhoto',
		desc: 'useBottledLiquefiedGasMsg',
		zgValue: 'useBottledLiquefiedGasZgqk',
		zgImage: 'useBottledLiquefiedGasZgPhoto',
		count: 'zxqlyhsyqsl'
	},
	{
		label: '疏散走道、楼梯间、安全出口处堆放物品影响人员疏散',
		value: 'useStackedItems',
		image: 'useStackedItemsPhoto',
		desc: 'useStackedItemsMsg',
		zgValue: 'useStackedItemsZgqk',
		zgImage: 'useStackedItemsZgPhoto',
	},
	{
		label: '私拉乱接电线',
		value: 'slljdx',
		image: 'slljdxPhoto',
		desc: 'slljdxMsg',
		zgValue: 'slljdxZgqk',
		zgImage: 'slljdxZgPhoto',
	},
	{
		label: '灭火器未保存完好有效',
		value: 'mhqwbcwhyx',
		image: 'mhqwbcwhyxPhoto',
		desc: 'mhqwbcwhyxMsg',
		zgValue: 'mhqwbcwhyxZgqk',
		zgImage: 'mhqwbcwhyxZgPhoto',
	},
	{
		label: '是否存在窗口防护网、广告牌、铁栅栏',
		value: 'Sfczckfhwggptzl',
		image: 'SfczckfhwggptzlPhoto',
		desc: 'SfczckfhwggptzlMsg',
		zgValue: 'SfczckfhwggptzlZgqk',
		zgImage: 'SfczckfhwggptzlPhoto',
	},
	{
		label: '简易喷淋灭火系统未保存完好有效',
		value: 'jyplmhxtwbcwhyx',
		image: 'jyplmhxtwbcwhyxPhoto',
		desc: 'jyplmhxtwbcwhyxMsg',
		zgValue: 'jyplmhxtwbcwhyxZgqk',
		zgImage: 'jyplmhxtwbcwhyxZgPhoto',
	},
	{
		label: '烟感报警器未否完好有效',
		value: 'ygbjwfwhyx',
		image: 'ygbjwfwhyxPhoto',
		desc: 'ygbjwfwhyxMsg',
		zgValue: 'ygbjwfwhyxMsgZgqk',
		zgImage: 'ygbjwfwhyxMsgZgPhoto',
	}
]
const validator = {
	boolean: [{ required: true, message: '请选择' }],
	image: [{ required: true, message: '请上传图片' }],
	desc: [{ required: true, message: '请输入' }],
	number: [
		{ required: true, message: '请输入' },
		{ validator: validateNumber, message: '请输入正数' }
	],
}
const formData = reactive({
	txxxysjbf: '',
	bzsm: '',
})
const echoData = {
	boolean: [
		{ label: '是', value: '1' },
		{ label: '否', value: '0' }
	],
	boolean2: [
		{ label: '是', value: '1' },
		{ label: '否', value: '0' },
		{ label: '不涉及', value: '2' }
	],
	boolean3: [
		{ label: '已整改', value: '1' },
		{ label: '未整改', value: '0' }
	],
	zgCountEnum: {
		1: '自行清理电动车数量(个)',
		2: '自行清理液化石油气数量',
	}
}

const onSubmit = async () => {
	if (!sign.value) {
		Toast('请签名')
		return
	}
	const params = {
		fwbh: route.query.fwbh,
	}
	checkList.value?.map((data, index) => {
		params[dataEnum[index]['value']] = +data.value
		params[dataEnum[index]['image']] = data.image?.map(item => {
			return item.url
		})?.join('|')
		if (+data.value === 1) {
			params[dataEnum[index]['desc']] = data.desc
			// params[dataEnum[index]['zgValue']] = +data.zgValue
		}
		// if (+data.zgValue === 1) {
		// 	params[dataEnum[index]['zgImage']] = data.zgImage?.map(item => {
		// 		return item.url
		// 	})?.join('|')
		// 	params[dataEnum[index]['count']] = +data.count
		// }
	})
	params['sign'] = sign.value
	Dialog.confirm({
		message: '确认提交？',
	}).then(() => {
		confirmSubmit({
			...params,
			jcly: 2,
			...formData,
			txxxysjbf: +formData.txxxysjbf,
		})
	})
}

const confirmSubmit = async (params) => {
	try {
		const result = await updateYhjc({
      zmpcbase: JSON.parse(sessionStorage.getItem('collentedData')),
      zmpcyh: params,
    })
		if (result.succ) {
			Dialog.alert({
				message: '提交成功',
			}).then(() => {
				router.go(-2)
			})
		}
	} catch (e) {

	}
}

</script>

<style scoped lang="less">
.village-check {
	height: 100%;
	h3 {
		padding: 20px 32px;
		position: relative;
		text-indent: 10px;
		&:before {
			position: absolute;
			content: '';
			height: 35%;
			top: 50%;
			transform: translateY(-50%);
			width: 6px;
			border-radius: 3px;
			left: 30px;
			background: var(--van-primary-color);
		}
	}
}
</style>
